<template>
    <div class="bg-white p-[20px]">
        <div class="flex justify-between items-center mb-[10px]">
            <span class="text-[16px]">列表标题</span>
            <a-button type="primary" @click="addEvent">添加按钮</a-button>
        </div>
        <div class="mb-[10px] bg-[#f7f8fa] rounded-[4px] px-[20px] pt-[20px] pb-[10px]">
            <a-form layout="inline" ref="formRef" :model="searchParam">
                <a-form-item label="标题" name="title">
                    <a-input class="w-[200px] mb-[10px]" allow-clear v-model:value="searchParam.title"
                        placeholder="请输入标题" />
                </a-form-item>

                <a-form-item>
                    <a-button type="primary" html-type="submit" @click="onSearch">
                        搜索
                    </a-button>
                    <a-button class="ml-[16px]" @click="resetForm">重置</a-button>
                </a-form-item>
            </a-form>
        </div>
        <a-table :columns="columns" :data-source="searchTable.data" :pagination="pagination"
            :loading="searchTable.loading" @change="onChange">
            <template #bodyCell="{ column, record }">
                <template v-if="column.dataIndex === 'action'">
                    <a-button type="link" @click="editEvent(record)">编辑</a-button>
                    <a-button type="link" @click="deleteEvent(record)">删除</a-button>
                </template>
            </template>
        </a-table>
        <edit-demo ref="editModal" @complete="onSearch" />
    </div>
</template>
<script lang="ts" setup>
import { reactive, ref, onMounted, computed } from 'vue';
import { message, Modal } from 'ant-design-vue';
import { ExclamationCircleOutlined } from '@ant-design/icons-vue';
import { createVNode } from 'vue';
import type { UnwrapRef } from 'vue';
import editDemo from './components/edit-demo.vue';
import { getAdminActionLog } from '@/utils/api/sys';

const formRef = ref();

const searchTable = reactive({
    current_page: 1,
    per_page: 10,
    total: 0,
    loading: false,
    data: [],
})

// 列表分页数据
const pagination = computed(() => ({
    total: searchTable.total,
    current: searchTable.current_page,
    pageSize: searchTable.per_page,
}));

interface FormState {
    title: string;
}

const searchParam: UnwrapRef<FormState> = reactive({
    title: '',
});

const resetForm = () => {
    formRef.value.resetFields();
};

const columns = [
    {
        title: '序号',
        dataIndex: 'id',
        key: 'id',
    },
    {
        title: '请求地址',
        dataIndex: 'url',
        key: 'url',
    },
    {
        title: '请求方式',
        dataIndex: 'method',
        key: 'method',
        responsive: ['lg'],
    },
    {
        title: '操作时间',
        dataIndex: 'created_at',
        key: 'created_at',
        responsive: ['lg'],//只有宽屏pc才显示
    },
    {
        title: '操作',
        dataIndex: 'action',
        key: 'action',
    },
];

onMounted(() => {
    onSearch();
});

const onChange = (pag: { pageSize: number; current: number }) => {
    searchTable.current_page = pag.current;
    searchTable.per_page = pag.pageSize;
    onSearch();
};

// 初始化数据
const onSearch = () => {
    getAdminActionLog({
        page: searchTable.current_page,
        per_page: searchTable.per_page
    }).then((res: any) => {
        searchTable.current_page = res.data.current_page;
        searchTable.per_page = res.data.per_page;
        searchTable.total = res.data.total;
        searchTable.data = res.data.data;
    }).catch(() => {
        searchTable.loading = false;
    })
};

const editModal: Record<string, any> | null = ref(null);

const addEvent = () => {
    editModal.value.setFormData(null);
    editModal.value.showModal = true;
}

const editEvent = (data: any) => {
    editModal.value.setFormData(data);
    editModal.value.showModal = true;
}

const deleteEvent = (data: any) => {
    Modal.confirm({
        title: '删除XXXX',
        icon: createVNode(ExclamationCircleOutlined),
        content: '确定要删除吗？删除后将无法恢复！',
        okType: 'danger',
        onOk() {
            console.log(data);
            console.log('OK');
            message.success('删除成功');
            // 删除请求 
            //onSearch();
        },
        onCancel() {
            console.log('Cancel');
        },
    });
}

</script>